BLOGGER TẤT TẦN TẬT: Blogger Widget

Hiển thị các bài đăng có nhãn Blogger Widget. Hiển thị tất cả bài đăng

Thứ Sáu, 21 tháng 2, 2020

Hướng dẫn tạo Footer Widget Responsive 3 cột cho blogspot (update 2020)

Xin chào các bạn, trong bài viết về thủ thuật blogspot này mình sẽ hướng dẫn các bạn thêm Footer Widget để có thể chèn thêm nhiều Widget cũng như các tiện ích thêm cho blog của mình.

Footer Widget dưới đây chủ yếu được tạo từ HTML và CSS nên sẽ không làm giảm tốc độ hay chậm cho blog và chuẩn Responsive mang tính thẩm mỹ cao.

Thứ Năm, 19 tháng 12, 2013

Hướng dẫn tạo widget bài viết ngẫu nhiên theo nhãn và toàn nội dung

Để thêm được widget này vào blog các bạn làm theo hướng dẫn sau:

Bước 1: Chọn thêm widget trong phần bố cục
Bước 2: Chọn Widget HTML/Javascript
Bước 3: Copy và dán đoạn code sau vào phần nội dung

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 16px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><script type="text/javascript" src="/feeds/posts/default/-/Templates?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

Hướng dẫn tùy chỉnh:
Để hiện bài ngẫu nhiên cho label cụ thể:

- Thay Templates bằng Label của bạn, nếu Label hơn 2 từ thì thêm %20 vào giữa 2 từ.
- Thay 5 trong giá trị: var numofpost=5 thành số bài bạn muốn hiển thị.

Để hiển thị bài ngẫu nhiên cho tất cả nội dung của bạn:

-Xóa phần -/Templates Trong đoạn code bôi đỏ, nhớ là xóa cả dấu -/ nha.

Bước 4: Lưu lại và thưởng thức.

Chúc các bạn thành công!

Thứ Hai, 16 tháng 12, 2013

Purez Responsive Magazine Blogger Template Premium Free - Chia sẻ Template Purez bản premium

RinBlog hôm nay xin chia sẻ tới các bạn một template cực đẹp và chuẩn SEO của MKR, template này được bán trên themeforest là 20$ với hơn 20 lần mua. Code template RinBlog chia sẻ hôm nay là code chuẩn được share từ một người bạn đã mua trực tiếp code trên themeforest nên các bạn hoàn toàn yên tâm là sẽ đạt được 100% tất cả những tính năng đặc sắc của bản gốc như demo.

Tất cả hướng dẫn đều nằm trong thư mục Documentations trong bản download, việc thêm widget, thay hình nền...v..v, đều rất dễ thực hiện.

Trong bản tải về có 4 file XML tương đương với 4 phiên bản bố cục khác nhau, các bạn có thể thử từng kiểu để tìm được kiểu ưng ý nhất.

DEMO

DOWNLOAD

Đừng quên nhấn like và chia sẻ nha! :)

Thứ Ba, 10 tháng 12, 2013

Hướng dẫn tạo hộp bài viết liên quan có hiệu ứng đổi màu khi rê chuột cho blogspot

Hôm nay mình sẽ chia sẻ với các bạn cách để tạo hộp bài viết liên quan cho blogspot có hiệu ứng đẹp khi rê chuột. Mình sẽ lần lượt chia sẻ 3 loại hộp bài viết có hiệu ứng khác nhau để các bạn tùy chọn.

Các bạn xem DEMO tại ĐÂY

Để thêm vào blogspot các bạn vui lòng thực hiện theo các bước sau đây

Bước 1: Vào bảng điều khiển blogger (Blogger Dasboard)
Bước 2: Chọn chỉnh sửa mẫu (Template)
Bước 3: Chọn chỉnh sửa HTML
Bước 4: Chọn mở rộng tiện ích
Bước 5: Tìm đoạn code sau:

</head>

Bước 6: Copy đoạn code dưới đây và dán vào phía trước đoạn code </head> vừa tìm được

<script language='JavaScript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 6) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } //]]> </script>

Bước 7: Tìm một vị trí thích hợp mà bạn muốn hộp bài viết liên quan hiện trong template.

Thường thì sẽ dán ở đoạn code sau:

<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Tuy nhiện với một số loại responsive template thì sẽ phải dán ở đoạn:

<b:includable id='relatedpost'> .......... </b:includable>

Bước 8: Copy và dán đoạn code sau vào đoạn code mà bạn vừa tìm được ở bước 7.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>"; var maxresults=5; 

removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Bước 9: Tiếp theo bạn tìm trong template đoạn code

]]></b:skin>

và dán vào phía trước đoạn code ]]></b:skin> một trong những đoạn code của các kiểu cho dưới đây mà bạn thấy thích.

LOẠI 1:

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}

LOẠI 2:

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

LOẠI 3:

#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

Bước 10: Lưu lại và thưởng thức.

Lưu ý: Các bạn hoàn toàn có thể tùy chỉnh màu sắc và cách thể hiện cũng như font chữ trong mỗi loại mà mình đã kể trên.

Chúc các bạn thành công.

Chủ Nhật, 8 tháng 12, 2013

Hướng dẫn tạo widget bài mới đăng đơn giản và đẹp cho blogspot

Để tạo được widget bài mới đăng đơn giản và đẹp như trong hình các bạn có thể làm theo những bước đơn giản sau đây:

Bước 1: Vào bảng điều khiển của blogger và chon layout ( Bố cục)

Bước 2: Chọn thêm tiện ích ( Add widget) tại vị trí bạn muốn widger bài mới đăng hiện trên trang của bạn.

Bước 3: Trong cửa sổ hiện ra bạn chon loại widger HTMl/ Javascript

Bước 4 Copy và dán đoạn code sau vào phần nội dung:

<style type='text/css'>
    img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
    float:left;margin:0px;}
    .recent_posts_with_thumbs {float: left;width: 350px;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:14px;}
    ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
    .recent_posts_with_thumbs a {text-decoration:none;}
    .recent_posts_with_thumbs strong {font-size:12px;}</style>
    <script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
    <script style='text/javascript'>
    var numposts = 5;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 100;</script>
    <script src='http://www.rinviet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Trong đoạn code trên các bạn tùy chỉnh như sau:

    var numposts = 5; ------------------ 5 là số bài viết hiện trên widget.
    var showpostthumbnails = true; --- Hiện ảnh thu nhỏ bài viết: True là có, False là không.
    var displaymore = false; ------------ Hiện nút Readmore (Đọc thêm): True là có, False là không.
    var displayseparator = false; ------- Hiện dấu ngắt giữa từng bài: True là có, False là không.
    var showcommentnum = false; --- Hiện số comment (nhận xét): True là có, False là không.
    var showpostdate = false; --------- Hiện ngày tháng bài viết xuất bản: True là có, False là không.
    var showpostsummary = true; ---- Hiện đoạn bài viết rút gọn: True là có, False là không hiện.
    var numchars = 100; --------------- Số ký tự của đoạn thu gọn.

http://www.rinviet.com ---- Thay đoạn code này bằng địa chỉ trang blog của các bạn. Sau khi thay xong các bạn kiểm tra bằng cách gõ vào thanh địa chỉ: http://địa chỉ blog của bạn/feeds/posts/default?orderby=published, nếu ra trang feeds thì bạn đã làm chính xác.

Bước 5, Lưu lại và xem thành quả.

Chúc các bạn thành công.

Thứ Năm, 5 tháng 12, 2013

Hướng dẫn tạo widget backlink ảnh + code cho blogspot -Create a Grab our button/badge for Blogspot

Backlink bằng ảnh và biểu tượng đang dần trở thành xu hướng của mọi website và blog hiện nay trên thế giới, đây cũng là cách tốt nhất để tạo những backlink và liên kết chất lượng cho website/blog của bạn.

Hôm nay RinBlog sẽ hướng dẫn các bạn tạo một widget backlink với hình ảnh và hộp lấy code. Lợi ích của widget này sẽ giúp các bạn có thể đưa code lên mà không bị lỗi, có thể lấy trực tiếp code ảnh.

Vì các bước khá rắc rối nên các bạn chú ý làm theo từng bước cơ bản để tránh sai sót. Tuy cách làm rắc rối nhưng các bạn sẽ thấy khá đơn giản nếu các bạn làm cẩn thận.

Bắt đầu thôi.

Bước 1: Tạo một ảnh backlink thật đẹp

Bước 1A:Các bạn vào trang http://cooltext.com/ kéo xuống gần cuối trang, tìm chọn hình để làm ảnh backlink như sau:

Bước 1B: Tiếp đó các bạn nhấp chọn vào ảnh đó sẽ được chuyển tới trang để tùy chỉnh hình ảnh. Nó sẽ có dạng như hình sau:

Các bạn tiến hành thiết lập hình ảnh của mình theo hướng dẫn ở hình ảnh trên.

Bước 1C: Sau khi đã tùy chỉnh xong, các bạn nhấp chọn Create Logo để chuyển tới trang hoàn thành.

Ở trang hoàn thành như hình dưới, các bạn chọn DOWNLOAD IMAGE để tải ảnh về máy.

Bước 1D: Sau đó các bạn tiến hành upload hình ảnh đó lên host nào đó, hoặc host của blogger.

Bước 2: Tạo code và chuyển đổi code

Bước 2A: Các bạn copy và sửa lại đoạn code sau:

<a href="URL BLOG"><img alt="" src="URL HÌNH ẢNH" title="GIỚI THIỆU" /></a>

URL BLOG -> Địa chỉ trang blog của các bạn
URL HÌNH ẢNH -> Dán URL của hình ảnh bạn tạo ở bước 1D
GIỚI THIỆU-> Dòng giới thiệu blog khi trỏ chuột vào hình ảnh

Sau Sau khi chỉnh sửa code sẽ có dạng như sau:
Ví dụ của RinBlog:

<a href="http://www.xn--rinvit-mk8b.vn"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvi7ypWDkr3LeTXVXHtxKTGklHLOn0Gejk5AdoMTRlRt9Yan3ByEe0SpwwXBT1h8FmbZdvmscXF77Lq8HDIIkLvc_mA1b8fHgg2JJMHH08mYEuRFEPRGuLbW2T2qgvcqgOv0ztvmAks6eT/h54/cooltext1318863096.gif" title="RinViet Blog" /></a>

Bước 2B: Sau khi đã chỉnh sửa blog, các bạn vào trang mã hóa (encode) HTML >>HTML ENCODER<<
Bạn copy đoạn code bạn đã chỉnh sửa ở đầu bước 2A vào khung Text Input và nhấp Encode Text như hướng dẫn ở hình dưới

Giữ nguyên trang kết quả này hoặc các bạn copy đoạn code ở ô Output ra để sử dụng nhé.

Bước 3. Tạo widget backlink + ảnh

Bước 3A: Các bạn vào Bố cục (layout) chọn thêm tiện ích (widget) ở vị trí các bạn muốn hiện trên trang website/blog.

Bước 3B: Trong menu thêm tiện ích (widget) các bạn chọn loại HTML/JAVASCRIPT

Bước 3C: Các bạn copy 2 đoạn code ở bước 2A và 2B sau đó dán vào phần nội dung của widget

Bước 3D: Lưu lại và xem thành quả.

Chúc các bạn thành công.

Thứ Hai, 2 tháng 12, 2013

Hướng dẫn tạo widget bài viết mới - recent post hiệu ứng 7 màu đẹp cho blogspot

Để làm được một widget bài mới đăng hiệu ứng như hình trên, các bạn vui lòng thực hiện theo các bước sau:

Bước 1: Vào bảng điều khiển Blogger của bạn, sau đó chọn bố cục (layout)

Bước 2: Chọn thêm tiện ích (add widget) vào vị trí bạn muốn widget bài mới hiện trên trang của bạn

Bước 3: Chọn loại tiện ích HTML / Java script sau đó copy và dán toàn bộ đoạn code sau vào phần nội dung của tiện ích.

code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">

home_page = "http://doanthieuda.blogspot.com/";
numposts = 5;

imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://dl.dropboxusercontent.com/s/niuq8uqagunjvbq/recent-posts-min-1-ycode.js" type="text/javascript"/></script><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/ecikvgo68yrfgps/recent-posts-min-1.css" /></div>

Lưu ý:

Các bạn tùy chỉnh đoạn code trên như sau:

home_page = "http://doanthieuda.blogspot.com/"; ----Thay doanthieuda.blogspot.com = tên blog của bạn.

numposts = 5; ----------------------------------------------- 5 là số bài viết sẽ được hiện.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript"> ------ Nếu sau khi thêm widget mà trang web của bạn bị xung đột code thì có thể xóa dòng màu xanh này đi. Lưu ý là nếu có xung đột thì mới xóa nhé, còn không có xung đột thì vẫn để nguyên.

Bước 4: Lưu lại và thưởng thức.

Chúc các bạn thành công

Code được sưu tầm và chỉnh sửa bởi RinBlog.

Thứ Năm, 28 tháng 11, 2013

Tạo Recent Post cho Blogspot chuyên nghiệp, Chia sẻ code Recent Post RinBlog đang dùng.

Như tiêu đề đã đăng, tớ sẽ chia sẻ đoạn code mà tớ dùng để tạo widget recent post đang áp dụng cho RinBlog. Cách làm cực kỳ đơn giản và hoàn toàn không đụng tới code chính của template.

Bước 1: Các bạn vào trang quản trị blogger, tiếp đó vào trang blog của cácbạn.

Bước 2: Các bạn chọn Bố cục (layout) rồi sau đó chọn thêm tiện ích (Add widget)

Bước 3: Trong giao diện của sổ hiện ra các bạn chọn loại widget là HTML/JAVASCRIPT

Bước 4: Copy và paste toàn bộ đoạn code sau vào ô nội dung, ô tiêu đề các bạn có thể tùy chọn theo ý riêng của các bạn.

Code:

<style type="text/css">

/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#000000;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:normal;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:normal;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:normal}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><script type="text/javascript" src="http://dl.dropboxusercontent.com/s/lvcqh2soqpa5tty/animated-recent-posts-ycode-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://doanthieuda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

Hết code.
Trong đoạn code trên, các bạn tùy chỉnh như sau:

var numposts = 5; ----------------------- 5 là số bài viết các bạn muốn hiển thị
var showpostthumbnails = true; ---------- Hiện ảnh thu nhỏ: true là có, false là không hiện ảnh
var displaymore = true; ------------------ Hiện nút đọc thêm (readmore), true là có, false là không hiện
var showcommentnum = true; ------------ Hiện số bình luận (comment), true là có, false là không hiện
var showpostdate = false; ---------------- Hiện ngày viết, true là có, false là không hiện
var showpostsummary = false; ----------- Hiện đoạn tóm tắt, true là có, false là không hiện
var numchars = 80; ---------------------- 80 là số ký tự trong đoạn tóm tắt

http://doanthieuda.blogspot.com/ ---------Thay địa chỉ này bằng địa chỉ trang blogspot của các bạn.

Bước 5: Lưu lại và xem thành quả.

Chúc các bạn thành công

Thứ Tư, 29 tháng 5, 2013

[Blogger Tips] Hướng dẫn thêm chức năng Floating Social chia sẻ vào Blogspot

Đây là một chức năng rất phổ biến và hữu dụng đối với dân làm Blog cũng như website. Bạn có thể gặp chúng ở bất cứ trang blog nổi tiếng nào trên mạng. Việc thêm chức năng này vào Blog sẽ giúp bạn tăng thêm rất nhiều sự quan tâm từ những mạng chia sẻ và chúng cũng góp phần hết sức quan trọng trong việc đưa Blog của bạn đến với người đọc một cách nhanh nhất. Trong bài này mình sẽ hướng dẫn các bạn một bước hết sức đơn giản để thêm chức năng này vào blog của các bạn. Những mạng chia sẻ có trong chức năng này là Facebook, Twitter, G+, Digg và dĩ nhiên bạn có thể thêm nhiều hơn chức năng và mạng xã hội khác nếu bạn muốn.

Để làm được điều đó thì bạn vui lòng thực hiện theo những bước đơn giản sau:

Bước 1: Bạn vào mục Bố cục/ layout
Bước 2: Chọn thêm một tiện ích/ widget ở một vị trí bất kỳ
Bước 3: Bạn chọn loại tiện ích là HTML/ Javascript
Bước 4: Bạn copy đoạn code sau vào ô trống trong cửa sổ widget mở ra.

<style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='mrbebibo' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/doanthieuda' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ2kweaSBdcqCSxtxqSk-o8qiooH-NICuKjOvWaJ7HHQFT-neFVR64W-I-DuRrYCeLMEaynXpBUSYir-451elvihIGMwzIjyVa-mjXYinfOMM0rIiMapkJjUwSgQso4E00U2EaqEyQtTtr/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://doanthieuda.blogspot.com/">widget</a></div> </div> </div>

Lưu ý:

Để chỉnh vị trí trái, phải cho tiện ích phù hợp với blog của bạn, bạn vui lòng chỉnh sửa đoạn code có màu đỏ sau thẻ margin-left để chỉnh vị trí.
Thay thế đoạn code màu tím "mrbebibo" để thay đổi tên toàn khoản twitter của bạn
Thay đoạn code màu xanh: http://feeds.feedburner.com/doanthieuda Bằng địa chỉ feed của bạn.

Bước 5: Lưu tiện ích lại và thưởng thức

Bài viết được dịch và đăng lại từ blog: http://helplogger.blogspot.com

[Blogger Tips] Hướng dẫn thêm bài viêt liên quan vào blogspot có ảnh Thumbnails

Đây là hướng dẫn rất đơn giản và dễ dàng thực hiện giúp các bạn có thể thêm phần bài viết liên quan vào mỗi bài viết trên blogspot của riêng mình. Bài viết liên quan ở đây được tính là những bài viết có cùng chung nhãn, tag hoặc thư mục. Lợi ích của việc bạn thêm bài viết liên quan sẽ giúp cho độc giả của các bạn có thêm những sự lựa chọn đọc bài viết cùng xu hướng, sở thích của họ trên blog của các bạn. Nhằm tăng thêm sự hứng thú cho người đọc.

Sau đây là 7 bước hết sức đơn giản để bạn có thể làm được điều này. Áp dụng cho tất cả những bạn biết rõ về code hoặc chưa biết gì về code html và css đều có thể làm được.

Bước 1: Vào trang quản lý blog >> Mẫu >> Chỉnh sửa HTML

Bước 2: Trong trang chỉnh sửa HTML bạn chọn vào chức năng Định Dạng Mẫu

Bước 3: Bạn bấm (CTRL + F) và tìm đến đoạn code sau:

</head>

Bước 4: Bạn copy đoạn code ở dưới và chèn vào phía trước đoạn code vừa tìm được, tức là trước thẻ </head>

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 18px;letter-spacing: 2px;font-weight: bold;text-transform: none;color: #5D5D5D;font-family: Arial Narrow;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;}#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtcTvoX0m7EIzlPI1-jvB7goa7RQ5M3JkVjzApUm_1NK1iat9lJhjK3OKhaCzJI7Ohz7T_tj5JOgL0hhIDqLC8zQTtihcKKkgLxi5sSM_VyJjhCj4mos1-fV58i1Pmd4Ln8RfQrzaLPvs/s1600/no_image.jpg";var maxresults=5;var splittercolor="#DDDDDD";var relatedpoststitle="Related Posts";</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/></b:if>

Chú ý:

Để đổi hình ảnh mặc định nếu bài viết không có ảnh, bạn đổi URL có màu xanh ở trên

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtcTvoX0m7EIzlPI1-jvB7goa7RQ5M3JkVjzApUm_1NK1iat9lJhjK3OKhaCzJI7Ohz7T_tj5JOgL0hhIDqLC8zQTtihcKKkgLxi5sSM_VyJjhCj4mos1-fV58i1Pmd4Ln8RfQrzaLPvs/s1600/no_image.jpg

Để hiển thị số lượng lớn hơn 5 ảnh, bạn thay đổi giá trị 5 thành số bài bạn muốn hiện trong đoạn code sau: "var maxresults=5;
Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên

Bước 5: Bạn tìm tiếp đoạn code sau:

<div class='post-footer'>

Bước 6: Bạn chèn đoạn code ở dưới vào trước đoạn thẻ vừa tìm được.


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDn_gi06yNtjqDwt6JL7ZOGN5IplTpygkV_5pMbUETdLeffqkI1wpXvxweSsZl1orf_Zh60xD1KDOe3sl88EONF_FOx-Si8ziEai0JYihdFrKAESZf8EPtGmYsG-B1n8jilc7cnGb5NjX9/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>